<template>
	<div class="pay_order_detail">
		<el-breadcrumb class="bread-title" style="font-size:14px;">
			<el-breadcrumb-item>交易中心</el-breadcrumb-item>
			<el-breadcrumb-item>客户管理</el-breadcrumb-item>
			<el-breadcrumb-item :to="{ path: '/payorderchecks' }">支付订单</el-breadcrumb-item>
			<el-breadcrumb-item>查看详情</el-breadcrumb-item>
		</el-breadcrumb>
		<h3>客户信息</h3>
		<table class="commontabel" cellpadding="0" cellspacing="0">
			<tbody>
				<tr>
					<td class="backtd">姓名</td>
					<td>{{infoList.customerName}}</td>
					<td class="backtd">手机号</td>
					<td>{{infoList.customerPhone |initPhone}}</td>
					<td class="backtd">性别</td>
					<td>{{infoList.customerSex}}</td>
				</tr>
				<tr>
					<td class="backtd">证件类型</td>
					<td>{{infoList.idType}}</td>
					<td class="backtd">证件号码</td>
					<td>{{infoList.idNum}}</td>
					<td class="backtd">证件姓名</td>
					<td>{{infoList.idCardName}}</td>
				</tr>
				<tr>
					<td class="backtd">订单号</td>
					<td>{{infoList.orderCode}}</td>
					<td class="backtd"></td>
					<td></td>
					<td class="backtd"></td>
					<td></td>
				</tr>
			</tbody>
		</table>
		<h3>楼盘信息</h3>
		<table class="commontabel" cellpadding="0" cellspacing="0">
			<tbody>
				<tr>
					<td class="backtd">楼盘名称</td>
					<td>{{infoList.devName}}</td>
					<td class="backtd">楼栋</td>
					<td>{{infoList.build}}</td>
					<td class="backtd">单元</td>
					<td>{{infoList.unit}}</td>
				</tr>
				<tr>
					<td class="backtd">房间号</td>
					<td>{{infoList.house}}</td>
					<td class="backtd">会员费</td>
					<td v-if="infoList.raiseMoney !=''">￥{{infoList.raiseMoney}}</td>
					<td v-if="infoList.raiseMoney ==''"></td>
					<td class="backtd">认购定金</td>
					<td v-if="infoList.purchaseMoney !=''">￥{{infoList.purchaseMoney}}</td>
					<td v-if="infoList.purchaseMoney ==''"></td>
				</tr>
			</tbody>
		</table>
		<h3>支付信息-会员费</h3>
		<table class="commontabel" cellpadding="0" cellspacing="0">
			<tbody>
				<tr>
					<td class="backtd">应付款金额</td>
					<td v-if="raiseLog.pay != '' ">{{raiseLog.pay |initMoney}}元</td>
					<td v-else></td>
					<td class="backtd">已付款金额</td>
					<td v-if="raiseLog.paid != '' ">{{raiseLog.paid |initMoney}}元</td>
					<td v-else></td>
					<td class="backtd">待付款金额</td>
					<td v-if="(raiseLog.pay != '')&& (raiseLog.paid != '') ">{{(raiseLog.pay-raiseLog.paid)|initMoney}}元</td>
					<td v-else></td>
				</tr>
				<tr>
					<td class="backtd">支付方式</td>
					<td v-if="raiseLog.payType=='TLTPOS'">
						<span v-if="raiseLog.tltCode=='VSP001'">POS刷卡</span>
						<span v-else>POS扫码</span>
					</td>
					<td v-else>{{raiseMsg}}</td>
					<td class="backtd">支付时间</td>
					<td><a href="javascript:;" @click="alertTime">{{raiseLog.createDate}}</a></td>
					<td class="backtd">交易流水号</td>
					<td>{{raiseLog.serialNumber}}</td>
				</tr>
			</tbody>
		</table>
		<div v-if="purchaseLog">
			<h3>支付信息-认购定金</h3>
			<table class="commontabel" cellpadding="0" cellspacing="0">
				<tbody>
					<tr>
						<td class="backtd">应付款金额</td>
						<td v-if="purchaseLog.pay != '' ">{{purchaseLog.pay |initMoney}}元</td>
						<td v-else></td>
						<td class="backtd">已付款金额</td>
						<td v-if="purchaseLog.paid != '' ">{{purchaseLog.paid |initMoney}}元</td>
						<td v-else></td>
						<td class="backtd">待付款金额</td>
						<td v-if="(purchaseLog.pay != '')&& (purchaseLog.paid != '') ">{{(purchaseLog.pay-purchaseLog.paid)|initMoney}}元</td>
						<td v-else></td>
					</tr>
					<tr>
						<td class="backtd">支付方式</td>
						<td v-if="purchaseLog.payType=='TLTPOS'">
							<span v-if="purchaseLog.tltCode=='VSP001'">POS刷卡</span>
							<span v-else>POS扫码</span>
						</td>
						<td v-else>{{purchaseMsg}}</td>
						<td class="backtd">支付时间</td>
						<td><a href="javascript:;" @click="alertTime">{{purchaseLog.createDate}}</a></td>
						<td class="backtd">交易流水号</td>
						<td>{{purchaseLog.serialNumber}}</td>
					</tr>
				</tbody>
			</table>
		</div>
		<div v-if="order.tradeStatus==6&&order.orderStatus==5"> <!--   -->
			<h3>退款结算</h3>	
			<div class="refund-file">
				<ul>
					<li>退款金额：{{raiseLog.paid |initMoney}}元</li>
					<li>退款方式：退款至退款申请时选择的账号</li>
					<li>付款结算方式：
						<el-select v-model="payOrderType" size="small" v-if="roleName=='运营人员'||roleName=='系统管理员'">
							<el-option v-for="(item,index) in payOrderTypeArr" :label="item.value" :value="item.id" :key="index"></el-option>
						</el-select>
						<el-select v-model="payOrderType" size="small" v-else disabled>
							<el-option v-for="(item,index) in payOrderTypeArr" :label="item.value" :value="item.id" :key="index"></el-option>
						</el-select></li>
					<li>退款理由：{{orderRefund.comments}}</li>
					<li>付款摘要：{{infoList.paymentSummary}}</li>
				</ul>
				<div class="refundImg" style="padding-left:10px;">
					<p style="font-size:14px;">退款凭证：</p>
					<viewer :images="images" class="imagebox">
						<div v-for="(src,index) in images" class="item-img">
							<img :src="src" :key="index" alt="" class="img" />
						</div>
					</viewer>
				</div>			
			</div>	
			<h3>收款账号信息</h3>
			<table class="commontabel" cellpadding="0" cellspacing="0">
				<tbody>
					<tr>
						<td class="backtd">收款人</td>
						<td>{{orderRefund.userName}}</td>
						<td class="backtd">收款账号</td>
						<td>{{orderRefund.bankNum}}</td>
						<td class="backtd">开卡省-市</td>
						<td>{{order.recProvinceName}}-{{order.recCityName}}</td>
					</tr>
					<tr>
						<td class="backtd">开户支行</td>
						<td>{{orderRefund.subBranch}}</td>
						<td class="backtd">联行号</td>
						<td>{{orderRefund.linkNumber}}</td>
						<td class="backtd">地区代码</td>
						<td>{{orderRefund.linkNumber |initDiscode}}</td>
					</tr>
				</tbody>
			</table>
			<h3>付款账号信息<!--  -->
				<a 
					v-if="type=='check'&&(roleName=='运营人员'||roleName=='系统管理员')" 
					href="javascript:;" 
					style="text-decoration:none;color:#337ab7;"  
					@click="changePay">修改付款账号</a>
			</h3>
			<table class="commontabel" cellpadding="0" cellspacing="0">
				<tbody>
					<tr>
						<td class="backtd">付款公司</td>
						<td v-if="order.payerCompany !=''">{{order.payerCompany}}</td>
						<td v-else></td>
						<td class="backtd">付款账号</td>
						<td v-if="order.payerAccount !=''">{{order.payerAccount}}</td>
						<td v-else></td>
						<td class="backtd">开户支行</td>
						<td v-if="order.payerBranchBankName !=''">{{order.payerBranchBankName}}</td>
						<td v-else></td>
					</tr>
					<tr>
						<td class="backtd">纳税人识别号</td>
						<td v-if="order.payerIdentityNum !=''">{{order.payerIdentityNum}}</td>
						<td v-else></td>
						<td class="backtd">——</td>
						<td>——</td>
						<td class="backtd">——</td>
						<td>——</td>
					</tr>
				</tbody>
			</table>
		</div>
		<div class="submitCheck" v-if="type=='check'">
			<h3 v-if="kingdeeParams.roleType<=1">审核理由</h3>
			<h3 v-if="kingdeeParams.roleType==1">调整说明</h3>
			<el-input type="textarea" style="width: 40%" v-model.trim="texta" placeholder="请输入审核理由" maxlength="150" show-word-limit :rows="4"></el-input>
			<div style="margin-top:30px;width: 40%;text-align:center;" v-if="order.bpmRejectStatus != 6 ">
				<el-button type="primary" size="small" @click="submitCheck(4)">通过</el-button>
				<el-button type="danger" size="small" @click="submitCheck(5)">拒绝</el-button>
			</div>
			<div style="margin-top:30px;width: 40%;text-align:center;" v-if="order.bpmRejectStatus == 6 ">
				<el-button type="primary" size="small">重新提交</el-button>
				<el-button type="danger" size="small">驳回</el-button>
			</div>
		</div>
		<div class="step" v-if="order.orderStatus != 5 ">
			<el-steps :active="infoList.step" align-center>
				<el-step :title="item" :key="index" v-for="(item,index) in stepTitle"></el-step>
			</el-steps>
		</div>
		<div v-if="type!='check' && (order.orderStatus==3 || order.orderStatus==4)">
			<el-steps :active="infoList.step" align-center>
				<el-step :title="item" :key="index" v-for="(item,index) in stepTitle"></el-step>
			</el-steps>
			<h3>审核记录</h3>
			<table class="record-tab" cellspacing="0" cellpadding="0">
				<tbody>
					<tr>
						<td>系统</td>
						<td>操作</td>
						<td>操作人</td>
						<td>角色</td>
						<td>时间</td>
						<td>理由</td>
					</tr>
					<tr v-if="infoList.remarks.length !=0" v-for="item in infoList.remarks">
						<td>{{item.source}}</td>
						<td>{{item.checkStatus}}</td>
						<td>{{item.operator}}</td>
						<td>{{item.roleName}}</td>
						<td>{{item.createTime1}}</td>
						<td>{{item.comments}}</td>
					</tr>
					<tr v-else>
						<td colspan="6">暂无记录...</td>
					</tr>
				</tbody>
			</table>
		</div>
		<el-dialog title="支付记录" :visible.sync="timeVisible">
			<el-table :data="tableData" border stripe size="mini">
				<el-table-column type="index" label="序号" width="80" align="center"></el-table-column>
				<el-table-column label="支付时间" prop="createTime" align="center" :formatter="initTime"></el-table-column>
				<el-table-column label="支付方式" prop="payType" align="center" :formatter="initpayType"></el-table-column>
				<el-table-column label="支付金额" prop="payOnThisTime" align="center" :formatter="initTMoney"></el-table-column>
				<el-table-column label="交易流水号" prop="serialNumber" align="center"></el-table-column>
			</el-table>
		</el-dialog>
		<el-dialog title="修改付款方账号" :visible.sync="accountVisible" width="30%" >
			<el-form ref="form" :model="formData" label-width="155px" :rules="rules" >
				<el-form-item label="数据源：" ><span>内部法人单位</span></el-form-item>
				<el-form-item label="付款公司：" prop="id">
					<el-select v-model="formData.id" @change="changeCompany" filterable >
						<el-option v-for="(item,index) in changeAccounts" :label="item.companyName" :value="item.id" :key="index"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="账户：" prop="paymentAccNo">
					<el-select v-model="formData.paymentAccNo" @change="changeBank">
						<el-option v-for="(item,index) in accounts" :label="item.bankAccount" :value="item.bankAccount" :key="index"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="开户行名称（支行）：" ><span>{{formData.paymentBankName}}</span></el-form-item>
				<el-form-item label="纳税人识别号：" ><span>{{formData.companyTaxpayer}}</span></el-form-item>
				<el-form-item>
					<el-button type="primary" size="small" @click="confirmAccount">确定</el-button>
					<el-button type="info" size="small" @click="cancelAccount">取消</el-button>
				</el-form-item>
			</el-form>
			
		</el-dialog>
	</div>
</template>

<script>
	import utils from "@/common/utils";
	export default {
		name:"orderpaiddetail",
		data(){
			return {
				orderCode:this.$route.query.orderCode,
				type:this.$route.query.type,
				timeVisible:false,
				accountVisible:false,
				images:[],
				tableData:[],
				accounts:[],
				payOrderTypeArr:[
			        {id:1,value:"通过银企直连付款（对公）"},
			        {id:2,value:"通过银企直连付款（对私）"},
			        {id:3,value:"转账"}
			    ],
			    infoList:"",
			    kingdeeParams:"",
			    raiseLog:"",
			    raiseMsg:"",
			    roleName:"",
			    orderRefund:"",
			    order:"",
			    purchaseLog:"",
			    purchaseMsg:"",
			    stepTitle:[],
			    formData:{
			    	id:"",
			    	paymentName:"",
			    	paymentAccNo:"",
			    	paymentBankName:"",
			    	companyTaxpayer:"",
			    	companyRelatedCode:""
			    },
			    changeAccounts:[],
				stepActive:1,
				payOrderType:"",
				texta:"",
				rules:{
					id:[{ required: true, message: "请选择付款公司", trigger: "change" }],
					paymentAccNo:[{required: true, message: "请选择账户", trigger: "change"}]
				}
			}
		},
		filters:{
			initPhone(val){
				if(val){
					return val.substring(0, 3) + "****" + val.substring(7);
				}
			},
			initMoney(val){
				if (val != undefined && val != null && val.toString() != "") {
					let tempValue = parseFloat(val)
					return tempValue.toFixed(2).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
				}
			},
			initDiscode(val){
				if(val){
					return val.substring(3,7);
				}
			}
		},
		methods:{
			warn(msg){
				this.$message({
					message: msg,
					type: 'warning',
					duration:1500
				});
			},
			submitCheck(status){
				let obj={};
				obj.orderCode=this.orderCode;
				obj.commonts=this.texta;
				obj.payOrderType=this.payOrderType;
				obj.paymentName=this.formData.paymentName;
				obj.paymentAccNo=this.formData.paymentAccNo;
				obj.paymentBankName=this.formData.paymentBankName;
				obj.companyTaxpayer=this.formData.companyTaxpayer;
				obj.companyRelatedCode=this.formData.companyRelatedCode;
				if(!obj.payOrderType){
					this.warn("请选择付款结算方式");
					return;
				}
				for(let item in this.formData){
					if(item!="id"){
						if(this.formData[item]==""){
							this.warn("请选择付款方账号");
							return;
						}
					}
				}
				if(status==5){
					if(obj.commonts==""){
						this.warn("请输入拒绝理由");
						return;
					}
				}
				console.log(obj)
				this.$axios.post(`/cms/posCmsOrder/checkOrder`,obj).then(res => {
	               this.$message({
						message: '操作成功',
						showClose: true,
						duration:1500,
						type: 'success',
						onClose:()=>{
	                        this.$router.push({
	                        	path:"/payorderchecks"
	                        })
						}
					});
	            });
			},
			cancelAccount(){
				this.accountVisible=false;
			},
			confirmAccount(){
				this.$refs['form'].validate(valid => {
					if(!valid){
						return;
					}
					this.order.payerCompany=this.formData.paymentName;
					this.order.payerAccount=this.formData.paymentAccNo;
					this.order.payerBranchBankName=this.formData.paymentBankName;
					this.order.payerIdentityNum=this.formData.companyTaxpayer;
					this.accountVisible=false;
				});
			},
			changeBank(val){
				let obj=this.accounts.find(item=>{
					return item.bankAccount==val;
				})
				this.formData.paymentBankName=obj.openingBank;
			},
			changeCompany(val){
				let obj=this.changeAccounts.find(item=>{
					return item.id==val;
				})
				this.formData.paymentAccNo="";
				this.formData.paymentBankName="";
				this.formData.paymentName=obj.companyName;
				this.accounts=obj.bank;
				this.formData.companyTaxpayer=obj.companyTaxpayer;
				this.formData.companyRelatedCode=obj.companyRelatedCode;
			},
			changePay(){
				this.$axios.post(`/contract/api/contractUndersign/getInside`,{}).then(res => {
	               for(let i=0;i<res.length;i++){
		               	if(this.formData.companyTaxpayer==res[i].companyTaxpayer){
		               		this.formData.id=res[i].id;
		               	}
	               }
	               this.changeAccounts=res;
	               this.accountVisible=true;
	            });
			},
			initpayType(row, column, cellValue, index){
				if (cellValue == 'WECHAT')
                    return "微信支付";
                if (cellValue == 'TRANSFER')
                    return "银行转账";
                if (cellValue == 'ALIPAY')
                    return "支付宝支付";
                if (cellValue == 'HE')
                    return "合支付";
                if (cellValue == 'TLT')
                    return "线上通联支付";
                if (cellValue == 'TLTPOS') {
                    if (row.tltCode == 'VSP001') {
                        return "POS刷卡";
                    } else {
                        return "POS扫码";
                    }
                }
                return "";
			},
			initTime(row, column, cellValue, index){
				if(cellValue){
					return utils.getTimeString(Number(cellValue));
				}
			},
			initTMoney(row, column, cellValue, index){
				if (cellValue != undefined && cellValue != null && cellValue.toString() != "") {
					let tempValue = parseFloat(cellValue)
					return tempValue.toFixed(2).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
				}
			},
			loadInfo(){
				this.$axios.post(`/cms/posCmsOrder/getPosOrderDetail`,{orderCode:this.orderCode,createTime:""}).then(res => {
	                console.log(res);
	                let tempTit=res.msg.split(",");
	                this.infoList=res;
	                this.raiseLog=res.raiseLog;
	                this.orderRefund=res.orderRefund;
	                this.images=res.orderRefund.img;
	                this.order=res.order;
	                this.purchaseLog=res.purchaseLog;
	                this.payOrderType=res.payOrderType;
	                this.kingdeeParams=res.kingdeeParams;
	                for(let i=0;i<tempTit.length;i++){
	                	tempTit[i]=tempTit[i].replace(/\"/g, "").replace(/\'/g, "");
	                	this.stepTitle.push(tempTit[i])
	                }
	                if(res.raiseLog.payType.msg){
	                	this.raiseMsg=res.raiseLog.payType.msg;
	                }
	                if(res.purchaseLog){
	                	this.purchaseMsg=res.purchaseLog.payType.msg;
	                }
	                this.formData.paymentName=this.order.payerCompany;
					this.formData.paymentAccNo=this.order.payerAccount;
					this.formData.paymentBankName=this.order.payerBranchBankName;
					this.formData.companyTaxpayer=this.order.payerIdentityNum;
	                this.formData.companyRelatedCode=res.order.paymentCode;
	            });
			},
			alertTime(){
				this.$axios.post(`/cms/posCmsOrder/orderLog`,{orderCode:this.orderCode}).then(res => {
	               this.tableData=res;
	            });
				this.timeVisible=true;
			}
		},
		created(){
			this.roleName=JSON.parse(sessionStorage.getItem("cmsUser")).roleName;
		},
		mounted(){
			this.loadInfo();
		}
	}
</script>

<style lang="stylus">
	.pay_order_detail{
		.commontabel{
			border-top:1px solid #ccc;
			border-left:1px solid #ccc;
			width:100%;
			tr{
				display:flex;
				td{
					flex:1;
					text-align:center;
					padding:8px 0;
					border-bottom:1px solid #ccc;
					border-right:1px solid #ccc;
					font-size:14px;
					a{
						text-decoration:none;
						color:#0a6aa1;
					}
				}
				.backtd{
					background-color: rgba(242,242,242,1);
				}
			}
		}
		h3{
			font-weight:normal;
		}
		.refund-file{
			ul{
				padding-left:10px;
				overflow:hidden;
				li{
					float:left;
					width:50%;
					height:40px;
					font-size:14px;
				}
			}
		}
		.step{
			margin-top:30px;
		}
		.record-tab{
			border-top:1px solid #ccc;
			border-left:1px solid #ccc;
			width:100%;
			td{
				text-align:center;
				padding:8px 0;
				border-bottom:1px solid #ccc;
				border-right:1px solid #ccc;
				font-size:14px;
			}
		}
		.imagebox{
			overflow:hidden;
			.item-img{
				width:146px;
				height:146px;
				float:left;
				margin:0 5px;
				img{
					width:100%;
					height:100%;
				}
			}
		}
	}
</style>













